<template>
	<div class="ffffff mainpadding radius" style="width: 75%;">
		<div class="text_f color_theme">{{listid?'编辑':'新增'}}收货地址</div>
		<!-- 地址信息 -->
		<div class="margin_top">
			<div class="flexleft">
				<div class="text_d color_zero margin_leftr margin_right1 white_nowrap">地址信息：</div>
				<el-cascader ref="cascader" :options="options" :show-all-levels="false" v-model="cityInfo"
					@change="citychange" :props="{label:'text',value:'value'}" placeholder="请选择省/市/区"></el-cascader>
			</div>
			<div class="flexleft margin_top2">
				<div class="text_d color_zero margin_leftr margin_right1 white_nowrap">详细地址：</div>
				<el-input v-model="addressdetail" placeholder="请输入地址"></el-input>
			</div>
			<div class="flexleft margin_top2">
				<div class="text_d color_zero margin_right1 white_nowrap">收货人姓名：</div>
				<el-input v-model="name" placeholder="请输入收货人姓名"></el-input>
			</div>
			<div class="flexleft margin_top2">
				<div class="text_d color_zero margin_leftr margin_right1 white_nowrap">手机号码：</div>
				<el-input v-model="mobile" placeholder="请输入收货人手机号码"></el-input>
			</div>
		</div>
		<!-- 是否设置默认地址 -->
		<div style="margin-left: 95px;">
			<div class="flexleft margin_top2 pointer" @click="changevalue">
				<div class="selectedCustom margin_right1" v-if="value11"></div>
				<div class="noSelected margin_right1" v-if="!value11"></div>
				<div class="text_b color_zero">设置为默认收货地址</div>
			</div>
			<div class="submitBox margin_top2 pointer" style="width: 48px;" v-if="listid" @click="addaddress">保存</div>
			<div class="submitBox margin_top2 pointer" style="width: 48px;" v-if="!listid" @click="addaddress">添加</div>
		</div>
		<!-- 地址列表 -->
		<div class="margin_top">
			<el-table :data="list.data" max-height="450" border style="width: 100%">
				<el-table-column prop="name" align="center" label="收货人" width="100" label-class-name="color_zero"
					class-name="color_three"></el-table-column>
				<el-table-column prop="region" align="center" label="所在地区" label-class-name="color_zero"
					class-name="color_three">
				</el-table-column>
				<el-table-column prop="address" align="center" label="详细地址" label-class-name="color_zero"
					class-name="color_three"></el-table-column>
				<el-table-column prop="mobile" align="center" label="手机号码" width="120" label-class-name="color_zero"
					class-name="color_three"></el-table-column>
				<el-table-column align="center" label="操作" label-class-name="color_zero" class-name="color_three">
					<template slot-scope="scope">
						<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
						<el-button size="mini" type="danger"
							@click="handleDelete(scope.$index, scope.row)">删除</el-button>
					</template>
				</el-table-column>
				<el-table-column align="center" label="" label-class-name="color_zero" class-name="color_three">
					<template slot-scope="scope">
						<!-- <el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">默认地址</el-button> -->
						<div class="text_b color_six pointer" @click="setnormal(scope.$index, scope.row)"
							v-if="!scope.row.is_default">设为默认</div>
						<div class="text_b color_six" style="color: #3478F5;" v-if="scope.row.is_default">默认地址</div>
					</template>
				</el-table-column>
			</el-table>
			<div class="flexcenter margin_top" v-if="list.total > 12">
				<el-pagination background layout="prev, pager, next" :page-size="12" :total="list.total"
					@current-change="tuijianchange">
				</el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
	import citys from "@/static/city/city.js"
	import {
		address_edit,
		address_getlist,
		setdefault,
		address_del
	} from "@/API/address"
	export default {
		data() {
			return {
				page: 1,
				list: {
					data: []
				},
				cityInfo: [],
				options: [],
				addressdetail: "",
				mobile: "",
				name: "",
				listid: "",
				region: "",
				value11: 0,
				tableData: [{
					name: '财政厅',
					date: '河南省 郑州市金水区 东风路街道 ',
					address: '轻工业大学兴盛楼5楼236室',
					phone: "13865956230"
				}, {
					name: '财政厅',
					date: '河南省 郑州市金水区 东风路街道 ',
					address: '轻工业大学兴盛楼5楼236室',
					phone: "13865956230"
				}, {
					name: '财政厅',
					date: '河南省 郑州市金水区 东风路街道 ',
					address: '轻工业大学兴盛楼5楼236室',
					phone: "13865956230"
				}]
			}
		},
		created() {
			let data = JSON.parse(JSON.stringify(citys.data))
			this.options = data
			this.init()
		},
		methods: {
			init(page) {
				address_getlist({
					page: page || 1,
				}).then(res => {
					this.list = res.data.data
					this.list.data = res.data.data.data;
				})
			},
			// 推荐页码改变调用接口
			tuijianchange(val) {
				this.init(val)
			},
			isMobile(value) { //手机号校验
				let a = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/.test(value);
				return a;
			},
			addaddress() { //添加地址
				let _this = this;
				let mobile = _this.mobile;

				if (_this.cityInfo.length == 0) {
					this.$message.warning("请选择地址")
					return false;
				}
				if (_this.addressdetail == false) {
					this.$message.warning("请输入详细地址")
					return false;
				}
				if (_this.name == '') {
					this.$message.warning("请输入收货人名字")
					return false;
				}
				if (_this.mobile == "") {
					this.$message.warning("请输入收货请输入收货人手机号人名字")
					return false;
				}
				if (!_this.isMobile(_this.mobile)) {
					this.$message.error("手机号输入有误")
					return false
				}
				let data = {
					id: this.listid,
					name: _this.name,
					mobile: _this.mobile,
					address: _this.addressdetail,
					is_default: _this.value11,
					province: _this.cityInfo[0],
					city: _this.cityInfo[1],
					district: _this.cityInfo[2],
					region: this.region
				}
				if (!this.listid) {
					delete data.id
				}
				address_edit(data).then(res => {
					if (res.data.code == 1) {
						this.$message.success(res.data.msg)
						this.cityInfo = []
						this.addressdetail = ""
						this.mobile = ""
						this.name = ""
						this.listid = ""
						this.region = ""
						this.value11 = 0
						this.tuijianchange(1)
					} else {
						this.$message.error(res.data.msg)
					}
				})
			},
			citychange(e) {
				let data = this.$refs.cascader.getCheckedNodes()
				let region = data[0].pathNodes
				this.region = region[0].label + "/" + region[1].label + "/" + region[2].label
			},
			changevalue() {
				this.value11 = this.value11 ? 0 : 1
			},
			handleEdit(index, row) {
				this.cityInfo = [row.province, row.city, row.district]
				this.addressdetail = row.address
				this.mobile = row.mobile
				this.name = row.name
				this.listid = row.id
				this.region = row.region
				this.value11 = row.is_default
			},
			setnormal(index, row) {
				setdefault({
					id: row.id
				}).then(res => {
					if (res.data.code == 1) {
						this.$message.success(res.data.msg)
						this.tuijianchange(1)
					} else {
						this.$message.error(res.data.msg)
					}
				})
			},
			handleDelete(index, row) {
				this.$confirm('确认删除？')
					.then(_ => {
						address_del({
							id: row.id
						}).then(res => {
							if (res.data.code == 1) {
								this.$message.success(res.data.msg)
								this.tuijianchange(1)
							} else {
								this.$message.error(res.data.msg)
							}
						})
					}).catch(_ => {});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.margin_leftr {
		margin-left: 15px;
	}

	::v-deep .el-input {
		width: 50%;
	}

	::v-deep .el-cascader {
		width: 50%;

		.el-input {
			width: 100%;
		}
	}

	.submitBox {
		width: 48px;
		height: 28px;
		text-align: center;
		line-height: 28px;
		background: #3478F5;
		border-radius: 4px 4px 4px 4px;
		font-size: 12px;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}
</style>